<template>
  <div class="SelectItems">
    <div class="title" v-if="title">{{ title }}</div>
    <div class="SelectItemsBox">
      <div class="item" v-for="(v, i) in items" :key="i" @click="callBackClick(v)" :class="isActive(v.id) ? 'active':''" :style="items.length == 4 ? 'margin: 0 10rpx':''">
        {{ v.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    items: {
      type: Array,
      default: [],
    },
    actived: {
        type: Array,
        default: []
    }
  },
  methods: {
      callBackClick(v){
          this.$emit('selectItem', v)
      },
      isActive(id){
          let flag = false
          this.actived.forEach(v=>{
              if(v == id){
                  return flag = true
              }
          })
          return flag
      }
  }
};
</script>

<style scoped lang="less">
.SelectItems {
  padding: 0rpx 10rpx;
  box-sizing: border-box;
  .title {
    font-size: 28rpx;
    color: #000;
    font-weight: bold;
    padding: 0 20rpx;
    margin: 10rpx 0;
    box-sizing: border-box;
  }
  .SelectItemsBox {
    .item {
      margin: 0 10rpx 20rpx;
      width: 160rpx;
      height: 80rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      border: solid 1rpx #dfdfdf;
      text-align: center;
      color: #686868;
      font-size: 24rpx;
      line-height: 80rpx;
      display: inline-block;
    }
    .active{
        background: #fdefef;
        color: #d03b35;
        border: 1rpx solid #fdefef;
    }
  }
}
</style>